<template>
	<view>
		<!-- 搜索输入框 -->
		<view class="searchContainer">
			<view class="searchView">
				<icon type="search" size="40rpx" color="#6c6c6c"></icon>
				<input placeholder="输入商品名" placeholder-style="color:#6c6c6c;" class="searchInput" confirm-type="search" v-model="query"/>
			</view>
			<button class="searchButton"  @click="getSearchData">搜索</button>
		</view>
		<scroll-view scroll-y="true" style="height:calc(100vh - 88rpx);">
			<view>
				<goodsItem v-for="(item,index) in searchlist" :key="index" :goods_name="item.goods_name"/>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 引入列表组件
	import goodsItem from '@/components/goodsItem.vue'
	// 引入 封装请求
	import {get} from '@/uilts/http.js'
export default {
	components:{
		goodsItem
	},
	data() {
		return {
			query:"",
			searchlist:[],
		};
	},
	onLoad(option){
		
	},
	methods: {
		async getSearchData(){
			let res = await get('/goods/qsearch',{query:this.query})
			console.log(res.data)
			if(res.data.meta.status===200){
				this.searchlist=res.data.message
			}
		}
	}
};
</script>

<style lang="less">
.searchContainer {
	position: relative;
	display: flex;
	padding: 15rpx 18rpx;
	justify-content: space-between;
	align-items: center;
	icon {
		position: absolute;
		top: 27rpx;
		left: 40rpx;
		color: #6c6c6c;
	}
	.searchView{
		width: 599rpx;
		border-radius: 27rpx;
		height: 61rpx;
		background-color: #E7E7E7 ;
	}
	.searchInput {
		margin-top: -2rpx;
		width: 550rpx;
		margin-left: 78rpx;
		height: 65rpx;
		background-color: transparent;
	}
	.searchButton {
		background-color: #9100ff;
		color: #fff;
		width: 101rpx;
		height: 61rpx;
		font-size: 25rpx;
		border-radius: 8rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		margin-left: 16rpx;
	}
}
</style>
